<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btnPost">发送post请求</button>
<button id="btnGet">发送get请求</button>

<script src="./lib/axios.js"></script>
<script>
    document.querySelector('#btnPost').addEventListener('click',async function() {
        const {data} = await axios({  // data获取右边对象中的某个属性
            method: 'POST',
            url: 'http://www.liulongbin.top:3006/api/getbooks',
            data: {
                name: 'zs',
                age: 20
            }
        })
        console.log(data)
        // 如果调用某个方法的返回值是Promise实例，则前面可以添加await，await只能用被async修饰的方法中  也可以使用.then获取结果
        // const result = await axios({
        //     method: 'POST',
        //     url: 'http://www.liulongbin.top:3006/api/getbooks',
        //     data: {
        //         name: 'zs',
        //         age: 20
        //     }
        // })
        // console.log(result)
    })

    document.querySelector('#btnGet').addEventListener('click',async function() {
        /**
         * 调研axios之后，使用async/await进行简化
         * 使用解构赋值，从axios封装的大对象中，把data属性解构出来
         * 把解构出来的data属性，使用冒号进行重命名，一般命名为{ data: res }
         */
        const {data : res} = await axios({  // data获取右边对象中的某个属性
            method: 'GET',
            url: 'http://www.liulongbin.top:3006/api/getbooks',
            params: {
               id: 1
            }
        })
        console.log(res.data)
    })

</script>
</body>
</html>